<!-- components/ImageModal.vue -->
<template>
	<view v-if="visible" class="modal-container">
		<view class="modal-mask" :style="{ background: maskColor }" @click="handleMaskClick" @touchmove.stop.prevent="">
		</view>
		<view class="modal-content" @click.stop="">
			<view class="modal-content-lable">
				联系客服
			</view>
			<image :src="imageUrl" mode="aspectFit" class="responsive-image" />
			<image src="@/static/image/add.png" mode="widthFix" class="close-image" @click="handleMaskClick" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			imageUrl: {
				type: String,
				default: '../../static/kefu.jpg'
			},
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.6)'
			}
		},
		data() {
			return {
				visible: this.value
			}
		},
		watch: {
			value(newVal) {
				this.visible = newVal
			}
		},
		methods: {
			handleMaskClick() {
				console.log('1111');
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
	.modal-container {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.modal-content {
		width: 600rpx;
		height: 700rpx;
		background: #fff;
		z-index: 10;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		position: relative;
	}

	.modal-content-lable {
		font-size: 32rpx;

		margin-top: 40rpx;
	}

	.close-image {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		top: 30rpx;
		right: 30rpx;
		transform: rotate(45deg);
	}

	.responsive-image {
		width: 600rpx;
		height: 600rpx;
	}

	.close {
		margin-top: 40rpx;
		width: 200rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #999;
		color: #999;
		border-radius: 30rpx;
	}
</style>